<template>
  <view v-if="showPopup" class="uni-popup" :class="[popupstyle]" @touchmove.stop.prevent="clear">
    <view class="uni-popup__mask" :class="[ani]" @click="close(true)"></view>
    <view class="uni-popup__wrapper" :class="[ani, popupstyle]" @click="close(true)">
      <view class="uni-popup__wrapper-box" @click.stop="clear">
        <slot />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'UniPopup',
  props: {
    // 开启动画
    animation: {
      type: Boolean,
      default: true
    },
    // 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
    type: {
      type: String,
      default: 'center'
    },
    // maskClick
    maskClick: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      ani: '',
      showPopup: false
    }
  },
  computed: {
    popupstyle() {
      return 'popup-' + this.type
    }
  },
  created() {},
  methods: {
    clear(e) {},
    open() {
      this.showPopup = true
      this.$nextTick(() => {
        setTimeout(() => {
          this.ani = 'ani'
        }, 30)
      })
    },
    close(type) {
      if (!this.maskClick && type) return
      this.ani = ''
      this.$nextTick(() => {
        setTimeout(() => {
          this.showPopup = false
        }, 300)
      })
    }
  }
}
</script>

<style>
.uni-popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  overflow: hidden;
}

.uni-popup__mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
}

.uni-popup__mask.ani {
  transition: opacity 0.3s;
  opacity: 1;
}

.uni-popup__wrapper {
  position: absolute;
}

.uni-popup__wrapper-box {
  position: relative;
  box-sizing: border-box;
}

.uni-popup__wrapper.ani {
  transition: transform 0.3s;
}

/* 顶部弹出 */
.popup-top {
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
}

.popup-top.ani {
  transform: translateY(0);
}

/* 底部弹出 */
.popup-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
}

.popup-bottom.ani {
  transform: translateY(0);
}

/* 居中弹出 */
.popup-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
}

.popup-center.ani {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: all 0.3s;
}
</style> 